<template>
  <div>
    <el-table
      border
      row-key="id"
      :data="permissionList"
      :expand-row-keys="['1', '1608092599051849730']"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            :disabled="row.level === 4"
            @click="addPermission(row)"
          />
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            :disabled="row.level === 1"
            @click="updatePermission(row)"
          />
          <el-popconfirm
            :title="`你确定要删除${row.name}吗？`"
            @confirm="remove(row.id)"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                :disabled="row.level === 1"
              />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" v-model="permissionDialogVisible">
      <el-form
        label-width="120"
        ref="permissionDialogFormRef"
        :model="permissionDialogFormData"
        :rules="permissionDialogFormRules"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            placeholder="请输入名称"
            v-model="permissionDialogFormData.name"
          />
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input
            placeholder="请输入功能权限值"
            v-model="permissionDialogFormData.code"
          />
        </el-form-item>
        <el-form-item
          label="跳转路由权限值"
          v-if="permissionDialogFormData.type === 2"
        >
          <el-input
            placeholder="请输入跳转路由权限值"
            v-model="permissionDialogFormData.toCode"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="permissionDialogVisible = false">取消</el-button>
        <el-button @click="confirm" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: "XPermission",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
import {
  getPermissionApi,
  addPermissionApi,
  updatePermissionApi,
  removePermissionApi,
} from "@/api/acl/permission";
import type {
  GetRolePermissionList,
  GetRolePermissionItem,
} from "@/api/acl/model/roleModel";
import type { AddOrUpdatePermissionApiParams } from "@/api/acl/model/permissionModel";
import { ElMessage } from "element-plus";
/*************************************修改菜单******************************************/
const updatePermission = (row: GetRolePermissionItem) => {
  if (row.level === 4) {
    title.value = "修改功能";
    permissionDialogFormData.type = 2;
  } else {
    title.value = "修改菜单";
    permissionDialogFormData.type = 1;
  }
  // 显示对话框
  permissionDialogVisible.value = true;
  // 表单赋值
  permissionDialogFormData.code = row.code;
  permissionDialogFormData.name = row.name;
  permissionDialogFormData.toCode = row.toCode;
  permissionDialogFormData.id = row.id;
  permissionDialogFormData.level = row.level;
  permissionDialogFormData.pid = row.pid;
  permissionDialogFormData.children = row.children;
  // 清除校验规则
  permissionDialogFormRef.value?.clearValidate();
};
/*************************************添加菜单******************************************/
// 是否显示对话框的标识
const permissionDialogVisible = ref(false);
// 定义显示的标题
const title = ref("");

// 表单实例
const permissionDialogFormRef = ref();
// 表单数据
const permissionDialogFormData = reactive<AddOrUpdatePermissionApiParams>({
  name: "",
  code: "",
  toCode: "",
  type: 0,
  level: 0,
  pid: "",
  id: "",
  children: [],
});
// 表单校验规则
const permissionDialogFormRules = reactive({
  name: [{ required: true, message: "名称必须输入", trigger: "blur" }],
  code: [{ required: true, message: "权限值必须输入", trigger: "blur" }],
});
// 点击确定按钮
const confirm = async () => {
  // 校验表单
  await permissionDialogFormRef.value.validate();
  const id = permissionDialogFormData.id;
  if (id) {
    // 修改请求
    await updatePermissionApi(permissionDialogFormData);
  } else {
    // 添加请求
    await addPermissionApi(permissionDialogFormData);
  }
  // 关闭对话框
  permissionDialogVisible.value = false;
  // 提示用户
  ElMessage.success(`${id ? "修改" : "添加"}成功`);
  // 获取最新的数据
  getPermission();
};
// 点击添加按钮
const addPermission = (row: GetRolePermissionItem) => {
  if (row.level === 3) {
    title.value = "添加功能";
    permissionDialogFormData.type = 2;
  } else {
    title.value = "添加菜单";
    permissionDialogFormData.type = 1;
  }
  // 显示对话框
  permissionDialogVisible.value = true;
  // 赋值
  permissionDialogFormData.level = row.level + 1;
  permissionDialogFormData.pid = row.id;
  permissionDialogFormData.children = [];
  // 清空表单
  permissionDialogFormData.id = "";
  permissionDialogFormData.code = "";
  permissionDialogFormData.name = "";
  permissionDialogFormData.toCode = "";
  // 清除校验规则
  permissionDialogFormRef.value?.clearValidate();
};
/*************************************删除菜单******************************************/
const remove = async (id: string) => {
  await removePermissionApi(id);
  await getPermission();
  ElMessage.success("删除成功");
};
/*************************************数据展示******************************************/
const permissionList = ref<GetRolePermissionList>([]);
const getPermission = async () => {
  const res = await getPermissionApi();
  permissionList.value = res.children;
};
onMounted(getPermission);
</script>

<style scoped></style>
